<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container {
            margin: 0;
            padding: 0;
            border: 1px solid #85b73e;
        }
        .dropzone {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 200px;
            margin-bottom: 10px;
            list-style-type: none;
            padding: 10px;
            height: 30px;
            background: #ddd;
        }
        .dropzone:-moz-drag-over {
            border: 5px solid yellow;
        }
        .drag-item {
            display: flex;
            flex: 1 1 auto;
            justify-content: center;
            align-items: center;
            background: #85b73e;
            color: #444;
        }
        .active {
            background: maroon;
        }
    </style>
</head>
<body>
<!--属性 draggable 设置为 true，所以这个元素变成可拖动的。如果该属性被省略或被设置为 false，则该元素将不会被拖动，而是只选中文本。-->
<ul class="container">
    <li class="dropzone active" >1<span class="drag-item" draggable="true">item</span></li>
    <li class="dropzone">2</li>
    <li class="dropzone">3</li>
    <li class="dropzone">4</li>
</ul>
<script src="./index.js"></script>
</body>
</html>
